<template>
  <div class="wrap">
    <h2>
      忘记密码
    </h2>
    <div class="login-content" v-loading="sinUpLoading">
      <el-form ref="form" :model="form" label-width="0px" status-icon :rules="rules">

        <div class="login-content-wrap">
          <el-row :gutter="10">
            <el-col :xs="{span:24}" :sm="{span:12}" :md="{span:12}">
              <el-form-item prop="username" label="">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="login-content-wrap">
          <el-row :gutter="10">
            <el-col :xs="{span:24}" :sm="{span:12}" :md="{span:12}">
              <el-form-item prop="email" label="">
                <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="{span:24}" :sm="{span:12}" :md="{span:12}">
              <el-form-item prop="code" label="">
                <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="login-content-wrap">
          <el-row :gutter="10">
            <el-col :xs="{span:24}" :sm="{span:12}" :md="{span:12}">
              <el-form-item prop="password" label="">
                <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="{span:24}" :sm="{span:12}" :md="{span:12}">
              <el-form-item prop="checkpassword" label="">
                <el-input type="password" v-model="form.checkpassword" placeholder="请确认密码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="login-btn">
          <button class="submit" :disabled="isGetCode"  v-loading="codeLoading" @click="getCode">验证码</button>
          <button class="submit" :disabled="isSinUp" @click="toModifyPass('form')">提 交</button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import { getEmailCode, forgetPass } from '../http/api';
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if(value.length <6) {
          callback(new Error('密码不能小于6位'));
        }
        if (this.form.checkpassword !== '') {
          this.$refs.form.validateField('checkpassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      form: {
        username: '', // 用户名
        email: '', //邮箱
        code: '', //验证码
        password: '', //密码
        checkpassword: '', //确认密码
      },
      codeLoading: false,
      isGetCode: false,
      sinUpLoading: false,
      isSinUp: false,
      rules: {
        email: [
          { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkpassword: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入邮箱验证码', trigger: 'blur' },
        ]
      }
    }
  },
  mounted() {
    
  },
  methods: {
    getCode() {
      if(this.form.email) {
        this.codeLoading = true;
        this.isGetCode = true;
        getEmailCode(this.form.email).then(res => {
          this.codeLoading = false;
          this.isGetCode = false;
          if(res && res.data && res.data.code == 20000) {
            const { data } = res;
            Message.success(data.message)
          }
        })
      }
    },
    toModifyPass(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.sinUpLoading = true;
          this.isSinUp = true;
          forgetPass(this.form).then(res => {
            this.sinUpLoading = false;
            this.isSinUp = false;
            if(res && res.data && res.data.code == 20000) {
              Message.success("修改成功！")
              this.$router.push({
                path: '/login'
              })
            }
          })
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style lang="less" scope>

.wrap {
  h2 {
    font-size: 18px;
    margin: 40px 0;
    padding-bottom: 25px;
    font-weight: 500; 
    border-bottom: 0;
  }
  .login-content {
    .el-input__inner {
        -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border-radius: 0px;
        border: 0px solid #989898;
        border-bottom: 1px solid #989898;
        box-sizing: border-box;
        color: #989898;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
    }
  }
  .login-content-wrap {
    width: 100%;
    .el-form-item {
      // width: 400px;
      // margin-right: 100px;
    }
  }
  .login-btn {
      button {
        background: #4d4d4d;
        font-size: 18px;
        padding: 3px 20px;
        color: #FFF;
        border: 0 none;
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        margin-right: 10px;
      }
      button:hover {
        background-color: #f00;
      }
    }

}
</style>